<template>
    <div ref="chartRef" :style="{width: '100%', height: '100%'}"></div>
</template>

<script setup>
    import {useEcharts} from '@/hooks/useEcharts';
    import * as echarts from 'echarts';

    const props = defineProps({
        width: String,
        height: String,
        theme: String,
        bgColor: String,
        title: String,
        subtitle: String,
        data: null,     // 曲线数据
        xAxisData: null // x轴数据
    });

    const lineColor = '#666bb6';
    const colorList = ['#A7DA4C', '#45A6F7'];

    const option = {
        legend: {
            icon: 'circle',
            right: '10%',
            itemWidth: 6,
            itemGap: 20,
            textStyle: {
                color: '#fff',
            },
        },
        //提示框组件
        tooltip: {
            trigger: 'axis',
            backgroundColor: '#344572',
            borderColor: '#344572',
            textStyle:{
                color: 'white'
            },
        },
        title: {
            left: 'center',
            text: '温湿度01',
            textStyle: {
                color: '#fff',
                fontSize: 12,
                fontWeight: 400
            },
        },
        grid: {
            bottom: '13%',
            right: '13%',
            left:'13%'
        },
        xAxis: [{
                type: 'category', //坐标轴类型
                data: [
                    '16:40',
                    '16:45',
                    '08:40',
                    '09:40',
                    '10:42',
                    '12:42',
                    '15:45',
                ],
                axisLine: {
                    lineStyle: {
                        color: lineColor,
                    },
                },
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    rotate: 30,
                    textStyle: {
                        color: 'white',
                    },
                },
                boundaryGap: false, //坐标轴两边留白策略
            },
        ],
        yAxis: [
            {
                name: '温度(℃)',
                nameTextStyle: {
                    color: '#a3baff'
                },
                type: 'value',
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: lineColor,
                    },
                },
                axisLabel: {
                    formatter: '{value}℃',
                    textStyle: {
                        color: '#fff',
                    },
                },
                splitLine: {
                    show: false,
                },
            },
            {
                name: '湿度(%)',
                nameTextStyle: {
                    color: '#a3baff'
                },
                type: 'value',
                position: 'right',
                axisTick: {
                    show: false,
                },
                axisLabel: {
                    textStyle: {
                        color: '#fff',
                    },
                    formatter: '{value}%',
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: lineColor,
                    },
                },
                splitLine: {
                    show: false,
                },
            },
        ],
        series: [
            {
                smooth: true, //是否平滑曲线显示
                name: '温度',
                type: 'line',
                data: [10, 10, 30, 12, 15, 3, 7],
                symbolSize: 1,
                symbol: 'circle',
                yAxisIndex: 0,
                lineStyle: {
                    width: 2,
                },
                itemStyle: {
                    normal: {
                        color: colorList[0],
                        borderColor: colorList[0],
                    },
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: 'rgba(147,208,52,0.3)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(147,208,52,0)',
                            },
                        ],
                        false
                    ),
                    shadowColor: 'rgba(0,202,149, 0.9)',
                    shadowBlur: 20,
                },
            },

            {
                smooth: true, //是否平滑曲线显示
                name: '湿度',
                type: 'line',
                data: [150, 120, 170, 140, 500, 160, 110],
                symbolSize: 1,
                symbol: 'circle',
                yAxisIndex: 1,
                lineStyle: {
                    width: 2,
                },
                itemStyle: {
                    normal: {
                        color: colorList[1],
                        borderColor: colorList[1],
                    },
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(
                            0,
                            0,
                            0,
                            1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(71,168,247,0.3)',
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(71,168,247,0)',
                                },
                            ],
                            false
                        ),
                        shadowColor: 'rgba(0,202,149, 0.9)',
                        shadowBlur: 20,
                    },
                },
            },
        ],
    };
    const {
        chartRef,
        chart, nvll,
        echartsResizeFun
    } = useEcharts({props, option}); // {props: props, option: option}
</script>
<style scoped>
    :deep(.el-card__body){
        padding: 0 !important;
    }
</style>